<style type="text/css">
	#user-menu {
		margin: 20px
	}

	#user-menu .user-menu-head-image {
		width: 50px;
		height: 50px;
	}

	#user-menu .user-menu-buttons button {
		margin: 4px 0;
	}

	#user-menu .user-menu-buttons div {
		width: 48%
	}

	#user-menu .user-menu-capacity-info {
		margin: 5px 0;
	}

	#user-menu .cloud-card {
		border-radius: 0.5rem
	}

	.user-menu-layer {
		background-color: transparent !important;
		box-shadow: none
	}
</style>

<script type="text/html" id='tpl-user_menu'>
	<div id='user-menu'>
		<div class="cloud-card">
			<div class="layui-inline">
	  	  		<img src="{{d.head_image}}" class="user-menu-head-image">
	  	  	</div>

	  	  	<div class="layui-inline" style="margin-left: 20px">
	  	  		{{d.name}}
	  	  	</div>
		</div>
  	  	
		<div id="user_menu_capacity">
			<!-- <div class="user-menu-capacity-info cloud-card">
				<div>容量（--/--）</div>
				<br>
				<div class="layui-progress layui-progress-big" lay-showPercent="true">
					<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
				</div>
			</div> -->
		</div>
  	  	


  	  	<div class="user-menu-buttons cloud-card">
  	  		<div class="layui-inline">
  	  			<button type="button" data-type="1" class="layui-btn layui-btn-fluid layui-btn-primary">设置</button>
  	  		</div>
  	  		<div class="layui-inline" style="float: right;">
  	  			<button type="button" data-type="2" class="layui-btn layui-btn-fluid layui-btn-primary">修改密码</button>
  	  		</div>
  	  		
  	  		<button type="button" data-type="3" class="layui-btn layui-btn-fluid layui-btn-danger">退出登录</button>
  	  	</div>
	  	

	</div>
</script>

<script>
	app.defTpl('user_menu', function (arg) {
		layui.use(['form', 'layer', 'jquery', 'laytpl', 'element'], function () {
			var form = layui.form;
			var $ = layui.jquery;
			var laytpl = layui.laytpl;
			var element = layui.element;
			var layer_index;
			


			function listen() {
				$('.user-menu-buttons button').click(function () {
					var type = $(this).data('type');
					if (type == 1) {
						layer.close(layer_index)
						app.go('/user/user_info')
					} else if (type == 2) {
						layer.close(layer_index)
						app.go('/user/update_password')
					} else if (type == 3) {
						layui.data('userInfo', null); //删除userInfo表
						layer.msg('正在退出，稍后')
						app.ajaxPost('/api/login/logout', {}, function (d) {
							if (d.err_code == 0) {
								location.href = '/login';
							}
						})
						location.href = '/login';
					}
				})
			}

			

			function start() {
				laytpl($('#tpl-user_menu').html()).render(arg, function (html) {
					layer.open({
						type: 1,
						area: ['20rem', '20rem'],
						title: false,
						skin: 'user-menu-layer', //样式类名
						closeBtn: 0, //不显示关闭按钮
						anim: 2,
						shade: [0.8, '#000'],
						shadeClose: true,
						content: html,
						success: function (o, i) {
							layer_index = i
							layui.element.init();
							setCapacityHtml('--', '--', 0)
							getCapacity()
							listen()
							
						}
					})

				})
			}

			function getCapacity(){
				app.ajaxPost("/api/user/getCapacity", {}, function (res) {
					var capacity_used = app.bytesToSize(res.data.used)
					var capacity_count = app.bytesToSize(res.data.count)
					var percent = new Number(res.data.used / res.data.count * 100).toFixed(2)
					setCapacityHtml(capacity_used, capacity_count, percent)
				})
			}

			function setCapacityHtml(capacity_used, capacity_count, percent){
				var color="layui-bg-blue";
				var warm_text = "";
				if(percent>80 && percent <= 95){
					color = "layui-bg-orange";
				}else if(percent > 95 && percent <= 100){
					color = "layui-bg-red";
					warm_text="（即将超出）"
				} else if (percent > 95) {
					color = "layui-bg-red";
					warm_text = "（已超出）"
				}
				var html = '<div class="user-menu-capacity-info cloud-card">' +
					'<div>网盘容量 ' + capacity_used + '/' + capacity_count + warm_text+ '</div><br>' +
					'<div class="layui-progress layui-progress-big" lay-showPercent="true">' +
					'<div class="layui-progress-bar '+ color+'" lay-percent="' + percent + '%"></div>' +
					'</div></div>';

				$("#user_menu_capacity").html(html)
				element.render()
			}


			start()
			// layer.msg('hello');
		});
	})

</script>